<template>
  <div class="modal fade show rename-popup" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">创建文件夹</h5>
          <button type="button" class="close no-select" data-dismiss="modal" aria-label="Close">
            <span @click="closePopup">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group text-left">
              <label for="recipient-name" class="col-form-label ">请输入名称:</label>
              <input type="text" class="form-control" autocomplete="off" id="recipient-name" v-model="dirName">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="closePopup">取消
          </button>
          <button type="button" class="btn btn-primary" @click="createFunc">确定</button>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import {CreateFolder} from './../api/api.js'

  export default {
    name: 'CreateFolder',
    props: ['currentPath'],
    data() {
      return {
        dirName: ''
      }
    },
    methods: {
      closePopup() {
        this.$emit('close-popup');
      },
      createFunc() {
        CreateFolder(this.currentPath, this.dirName).then(result => {
          if (result) {
            this.$emit('refresh');
            this.$emit('close-popup');
          }
        })
      }
    }
  }
</script>
